<style lang="less">

  #div_users {

  }
</style>

<template>
  <div id="div_users">
    <el-table :data="users" border style="width: 100%">
      <el-table-column prop="userTypeName" label="用户类型"></el-table-column>
      <el-table-column prop="userName" label="用户名称"></el-table-column>
      <el-table-column prop="email" label="用户邮箱"></el-table-column>
      <el-table-column prop="userStatusName" label="用户状态"></el-table-column>
      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" v-if="scope.row.userStatusCode === 100002001"
                     @click="modifyStatusClick(scope.row,100002002)">启用
          </el-button>
          <el-button type="primary" v-if="scope.row.userStatusCode === 100002002"
                     @click="modifyStatusClick(scope.row,100002003)">禁用
          </el-button>
          <el-button type="primary" v-if="scope.row.userStatusCode === 100002003"
                     @click="modifyStatusClick(scope.row,100002001)">重新验证
          </el-button>
          <el-button type="primary" @click="deleted(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {getUsers, modifyStatus, deleted} from '../../../api/Users.js';

  export default {
    data () {
      return {
        users: []
      };
    },
    methods: {
      modifyStatusClick (row, status) {
        this.$confirm('确认修改状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          modifyStatus(row.id, status).then((res) => {
            this.getUsers();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      deleted (row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleted(row.id).then((res) => {
            this.getUsers();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      getUsers () {
        getUsers({
          filters: '', sorts: '', page: 1, size: 10
        }).then((res) => {
          this.users = res.data.objects;
        });
      }
    },
    mounted () {
      this.getUsers();
    }
  };
</script>
